<template>
  <div class="app-container">
    <h3 class="title">房型类型设置</h3>
    <el-button v-if="setPermissionBtn('/room/type/add', addBtn)" class="addBtn" type="primary" @click="add">{{ addBtn.btnName }}</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ scope.row.typeName }}
        </template>
      </el-table-column>
      <el-table-column label="顺序">
        <template slot-scope="scope">
          {{ scope.row.sort }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">停用</span>
          <span v-else-if="scope.row.status === 1">启用</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="240">
        <template slot-scope="scope">
          <el-button
            v-if="setPermissionBtn('/room/type/edit/all', scope.row)"
            :disabled="scope.row.status === 1"
            size="mini"
            value="编辑"
            type="primary"
            @click="edit(scope.row, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/room/type/edit/status', scope.row)"
            :type="scope.row.status == 0?'success':'danger'"
            size="mini"
            value="启用/停用"
            @click="editStatus(scope.row.id, scope.row.typeName, scope.row.status)"
            v-html="splitName(scope.row.btnName, scope.row.status)"/>
          <el-button
            v-if="setPermissionBtn('/room/type/del', scope.row)"
            :disabled="scope.row.status === 1"
            value="删除"
            size="mini"
            type="danger"
            @click="del(scope.row.id, scope.row.typeName, -1)">{{ scope.row.btnName }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <Settings
      :settings-visible.sync="dialogTableVisible"
      :dialog-data.sync="rowData"
      :my-index.sync="detailIndex"
      :setting-mode="'roomsType'"
      @updataParent="submitFn"/>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

import { Message } from 'element-ui'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'
import { getLocalUserName, setLocalUserName } from '@/utils/uid'
import { getAddressList, addressUpdate } from '@/api/address'
import { getRoomListType, addRoomType, editRoomType, editStatusRoomType, delRoomType } from '@/api/hotel'
import Settings from '@/components/Settings'

export default {
  components: { Pagination, Settings },
  filters: {
    nullStr(str) {
      if (str === '' || str === null) {
        return '-'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      userType: -1,
      list: [],
      rowData: {},
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      search: {
        orderNumbers: '',
        vipId: '',
        name: '',
        phone: '',
        startTime: '',
        endTime: ''
      },
      dialogTableVisible: false,
      detailIndex: -1,
      permissionShow: false, // 权限数据未到达之前按钮隐藏
      // permissionList: [] // 权限数据列表
      allData: [],
      addBtn: {}
    }
  },
  computed: {
    // 权限按钮 computed
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    },
    // 用于 停用/启用  上架/下架 按钮的显示
    splitName() {
      return function(name, status) {
        const nameArr = name.split('/')
        if (status === 0) {
          return nameArr[0]
        } else {
          return nameArr[1]
        }
      }
    }
  },
  watch: {
    'permissionList'(newVal) {
      this.permissionList = newVal
      this.permissionShow = true
    }
  },
  created() {
    this.getUserType()
    this.fetchData()
    // this.getPermissonFn()
  },
  mounted() {
    this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    // 权限数据的获取
    // getPermissonFn() {
    //   const id = getLocalId()
    //   const uid = getLocalUid()
    //   const data = { uid }
    //   getPermission(id, data).then(res => {
    //     console.log('权限结果', res)
    //     if (res.code === '200') {
    //       this.permissionList = res.data
    //       // console.log('权限名称：', this.getPermissionName(this.permissionList))
    //     } else {
    //       Message.error(res.message + '-' + res.data)
    //     }
    //   })
    // },
    submitFn(data) {
      // console.log(data)
      this.detailIndex === -1 ? addRoomType(data).then(res => {
        if (res.code === '200') {
          Message.success('新增成功')
          this.fetchData();
        } else {
          Message.error(res.message + '-' + res.data)
        }
      }) : editRoomType(data).then(res => {
        if (res.code === '200') {
          Message.success('编辑成功')
          this.fetchData();
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    add() {
      this.detailIndex = -1
      this.dialogTableVisible = true
    },
    getUserType() {
      switch (getLocalUserName()) {
        case 'admin':
          this.userType = 1
          break;
        case 'sale':
          this.userType = 2
          break;
        case 'casher':
          this.userType = 3
          break;
      }
    },
    // 启用做限制
    // checkAllData() {
    //   const newData = { pageNum: 0, pageSize: 1000 }
    //   getRoomListType(newData).then(response => {
    //     const arr = []
    //     if (response.code === '200') {
    //       this.allData = response.data.list
    //       console.log('this.allData', this.allData)
    //       this.allData.forEach((item) => {
    //         if (item.status === 1) {
    //           arr.push(item.status)
    //         }
    //         if (arr.length > 5) {
    //           return false
    //         } else {
    //           return true
    //         }
    //       })
    //     } else {
    //       this.listLoading = false
    //     }
    //   })
    // },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery)
      console.log('newData:=>', newData)
      getRoomListType(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          console.log('订单数据：', this.list)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    },
    see(index) {
      this.dialogTableVisible = true
      this.detailIndex = index
    },
    edit(row, index) {
      console.log(row, index)
      this.detailIndex = index
      this.rowData = row
      this.dialogTableVisible = true
    },
    editStatus(id, name, type) {
      const strAsk = type === 1 ? `是否停用【${name}】商品类型？` : `是否启用【${name}】商品类型？`
      const str = type === 1 ? '已停用' : '已启用'
      this.$confirm(strAsk, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        type === 0 ? type = 1 : type = 0
        const data = { status: type, id }
        console.log('停用/启用', data)
        editStatusRoomType(data).then(res => {
          if (res.code === '200') {
            Message.success(str)
            this.fetchData()
          } else {
            Message.error(res.message + res.data)
          }
        })
      })
    },
    del(id, name, type) {
      this.$confirm(`是否删除【${name}】商品类型？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        const data = { status: 0, id }
        delRoomType(data).then(res => {
          if (res.code === '200') {
            Message.success('已删除')
            this.fetchData()
          } else {
            Message.error(res.message + res.data)
          }
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .inputBox{
    div{ margin-bottom: 10px;}
  }

  .addBtn{
      margin-bottom: 20px;
  }
</style>
